<template>
	<view class="product-con">
		<view>
			<view id="past0">
				<productConSwiper 
					:imgUrls="storeInfo.slider_image" 
					:videoline="storeInfo.video_link"
					@videoPause="videoPause"
				></productConSwiper>
				<view class="wrapper">
					<view class="share acea-row row-between row-bottom">
						<view class="acea-row row-bottom">
							<view class="money font-color" style="margin-right: 20rpx;">
								<text>￥</text>
								<text class="num" style="display: inline-block; margin-bottom: -12rpx;" v-text="storeInfo.price || 0"></text>
								<text v-if="storeInfo.spec_type">起</text>
							</view>
							<view class="text-gray">原价: <text class="ot-price">￥{{ storeInfo.ot_price || 0 }}</text></view>
						</view>
						<view v-text="'销量:' + (storeInfo.fsales || 0) + (storeInfo.unit_name || '')" class="text-gray"></view>
					</view>
					<view class="introduce" v-text="storeInfo.store_name"></view>
					<view class='label labelNav acea-row row-middle' style="padding-bottom: 20rpx;">
						<view class='item' v-for="(item, index) in storeInfo.product_label" :key="index">
							<text class='iconfont icon-xuanzhong'></text>{{ item }}
						</view>
					</view>
					<!-- 促销 -->
					<view class="promiton" style="border-top: 1px solid #eee;">
						<view class="acea-row" style="padding-bottom: 20rpx;" v-if="storeInfo.coupons.length > 0">
							<text class="" style="margin-right: 30rpx;">优惠</text>
							<view class="">
								<text style="color: #ff5637; margin-right: 30rpx;">买赠券</text>
								<text>下单返券</text>
							</view>
						</view>
						<view class="acea-row" style="padding-bottom: 20rpx;">
							<text class="" style="margin-right: 30rpx;">促销</text>
							<view class="" style="flex: 1;">
								<text style="color: #ff5637;">{{ storeInfo.promotion_info }}</text>
							</view>
						</view>
						<view class="acea-row" style="padding-bottom: 20rpx;" v-if="storeInfo.gift_product_ids">
							<text class="" style="margin-right: 30rpx;">推广</text>
							<view class="">
								<text>分享商品推广送赠品</text>
							</view>
						</view>
						<view class="more"></view>
					</view>
				</view>
				<!-- 属性选择 -->
				<view class="attribute acea-row row-between-wrapper" @click="selecAttr" v-if="attr.productAttr.length">
					<view style="display: flex; align-items: center; width: 90%;">
						{{ attrTxt }}：
						<view class="atterTxt line1" style="width: 82%;">{{ attrValue }}</view>
					</view>
					<view class="iconfont icon-jiantou"></view>
				</view>
			</view>
			
			<view class="product-intro" id="past3">
				<view class="title">产品介绍</view>
				<view class="conter">
					<view class="description" v-html="description"></view>
				</view>
			</view>
		</view>
		<view class="footer acea-row">
			<navigator hover-class="none" class="item" open-type="switchTab" url="/pages/index/index">
				<view class="iconfont icon-shouye6"></view>
				<view class="p_center">首页</view>
			</navigator>
			<view class="bnt acea-row">
				<view class="buy bnts" @tap="exchange" v-if="attr.cartAttr">立即兑换</view>
				<view class="buy bnts" @tap="openAttr" v-else>立即兑换</view>
			</view>
		</view>
		<!-- 商品规格组件 -->
		<productWindow 
			:attr="attr" 
			:attrValue="attrValue" 
			:showAddress="false"
			@myevent="onMyEvent" 
			@ChangeAttr="ChangeAttr"
			@attrVal="attrVal"
			@iptCartNum="iptCartNum"
			id="product-window"
			@monthAttrVal="monthAttrVal"
			@chooseDate="chooseDate"
			:goodsType="storeInfo.store_type"
		></productWindow>
		<kefuIcon :ids='parseInt(id)' :routineContact='routineContact'></kefuIcon>
	</view>
</template>

<script>
	import { getProductDetail } from '@/api/store.js';
	import { submitExchange } from '@/api/order.js';
	import productConSwiper from '@/components/productConSwiper';
	import productWindow from '@/components/productWindow';
	import kefuIcon from '@/components/kefuIcon';
	import mpHtml from '@/components/mp-html/mp-html';
	import ClipboardJS from '@/plugin/clipboard/clipboard.js';
	export default {
		components: {
			productConSwiper,
			productWindow,
			kefuIcon,
			mpHtml,
		},
		data() {
			return {
				attrTxt: '请选择', //属性页面提示
				attrValue: '', //已选属性
				id: 0, //商品id
				storeInfo: {}, //商品详情
				productValue: [], //系统属性
				isOpen: false, //是否打开属性组件
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
				},
				description: '',
				exchangeId: '', // 兑换码
				gift_product_ids: [],
				delivery_interval: '', // 配送间隔
				delivery_week: '', // 送达时间
				delivery_date: '', // 自选日期商品送达日期
			};
		},
		watch: {
			storeInfo: {
				handler: function() {
					this.$nextTick(() => {});
				},
				immediate: true
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.id) this.id = options.id;
			this.exchangeId = options.exchangeId;
			this.getGoodsDetails();
		},
		methods: {
			videoPause() {},
			
			// 购物车手动填写
			iptCartNum: function(e) {
				this.$set(this.attr.productSelect, 'cart_num', e);
			},
			
			attrVal(val) {
				this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
					.indexn]);
			},
			monthAttrVal(val) {
				// console.log(val)
				const {indexw, indexn} = JSON.parse(val)
				this.attr.monthGoodsAttr[indexw].attr_value.map(el => {
					el.check = false
				})
				this.attr.monthGoodsAttr[indexw].attr_value[indexn].check = true
				this.$set(this, 'delivery_interval', this.attr.monthGoodsAttr[indexw].attr_value[indexn].value || this.delivery_interval)
				let delivery_week = this.attr.monthGoodsAttr[indexw].attr_value[indexn].val
				this.$set(this, 'delivery_week', delivery_week || this.delivery_week)
			},
			// 日期选择
			chooseDate(e) {
				this.$set(this, 'delivery_date', e)
			},
			// 属性变动赋值
			ChangeAttr: function(res) {
				let productSelect = this.productValue[res];
				if (productSelect && productSelect.stock > 0) {
					this.$set(this.attr.productSelect, 'image', productSelect.image);
					this.$set(this.attr.productSelect, 'price', productSelect.price);
					this.$set(this.attr.productSelect, 'stock', productSelect.stock);
					this.$set(this.attr.productSelect, 'unique', productSelect.unique);
					this.$set(this.attr.productSelect, 'cart_num', 1);
					this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
					this.$set(this, 'attrValue', res);
					this.$set(this, 'attrTxt', '已选择');
				} else {
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
					this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
					this.$set(this.attr.productSelect, 'stock', 0);
					this.$set(this.attr.productSelect, 'unique', '');
					this.$set(this.attr.productSelect, 'cart_num', 0);
					this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
					this.$set(this, 'attrValue', '');
					this.$set(this, 'attrTxt', '请选择');
				}
			},
			
			// 获取产品详情
			getGoodsDetails: function() {
				let that = this;
				getProductDetail(that.id)
					.then(res => {
						let storeInfo = res.data.storeInfo;
						that.$set(that, 'storeInfo', storeInfo);
						that.$set(that, 'description', storeInfo.description);
						that.description = that.description.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');
						that.$set(that.attr, 'productAttr', res.data.productAttr);
						that.$set(that, 'productValue', res.data.productValue);
						
						if(storeInfo.gift_goods && storeInfo.gift_goods.length > 0) {
							storeInfo.gift_goods.map(el => {
								el.checked = true
								el.is_gift = 1
								that.gift_product_ids.push(el.id)
							})
						}
						
						that.$set(that.attr, 'plusList', storeInfo.gift_goods);
						let monthGoodsAttr = [
							{
								name: '间隔日期',
								attr_value: []
							},
							{
								name: '送达时间',
								attr_value: []
							}
						]
						let delivery_week = ''
						if(storeInfo.store_type == 2) {
							storeInfo.interval.map((el, index) => {
								monthGoodsAttr[0].attr_value.push({
									attr: el == 1 ? '一周一次' : '两周一次',
									check: false,
									value: el
								})
							})
							storeInfo.receive_time.map((el,index) => {
								monthGoodsAttr[1].attr_value.push({
									attr: el.name,
									desc: el.days,
									check: false,
									val: el.value
								})
							})
						}
						
						that.$set(that.attr, 'monthGoodsAttr', monthGoodsAttr);
						
						// 时间排序并转换显示格式
						let timeArr = [];
						if(res.data.storeInfo.option_time && res.data.storeInfo.option_time.length > 0) {
							let newArr = res.data.storeInfo.option_time
							function sortDownDate(a, b) {
								return Date.parse(a) - Date.parse(b);
							}
							let newTimeArr = newArr.sort(sortDownDate)
							timeArr = newTimeArr.map(el => {
								let weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
								let myDate = new Date(Date.parse(el));
								let week = weekDay[myDate.getDay()]
								return el + ' ' + week
							})
						}
						
						that.$set(that.attr, 'optionTime', timeArr);
						that.DefaultSelect();
					})
					.catch(err => {
						//状态异常返回上级页面
						return that.$util.Tips({
							title: err.toString()
						}, {
							tab: 3,
							url: 1
						});
					});
			},
			
			// 默认选中属性
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				for (var key in this.productValue) {
					if (this.productValue[key].stock > 0) {
						value = this.attr.productAttr.length ? key.split(',') : [];
						break;
					}
				}
				// for (let i = 0; i < productAttr.length; i++) {
				// 	this.$set(productAttr[i], 'index', value[i]);
				// }
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.join(',')];
				if (productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
					this.$set(this.attr.productSelect, 'image', productSelect.image);
					this.$set(this.attr.productSelect, 'price', productSelect.price);
					this.$set(this.attr.productSelect, 'stock', productSelect.stock);
					this.$set(this.attr.productSelect, 'unique', productSelect.unique);
					this.$set(this.attr.productSelect, 'cart_num', 1);
					// this.$set(this, 'attrValue', value.join(','));
					this.$set(this.attr.productSelect, 'vip_price', productSelect.vip_price);
					// this.$set(this, 'attrTxt', '已选择');
				} else if (!productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
					this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
					this.$set(this.attr.productSelect, 'stock', 0);
					this.$set(this.attr.productSelect, 'unique', '');
					this.$set(this.attr.productSelect, 'cart_num', 0);
					this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
					this.$set(this, 'attrValue', '');
					this.$set(this, 'attrTxt', '请选择');
				} else if (!productSelect && !productAttr.length) {
					this.$set(this.attr.productSelect, 'store_name', this.storeInfo.store_name);
					this.$set(this.attr.productSelect, 'image', this.storeInfo.image);
					this.$set(this.attr.productSelect, 'price', this.storeInfo.price);
					this.$set(this.attr.productSelect, 'stock', this.storeInfo.stock);
					this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '');
					this.$set(this.attr.productSelect, 'cart_num', 1);
					this.$set(this.attr.productSelect, 'vip_price', this.storeInfo.vip_price);
					this.$set(this, 'attrValue', '');
					this.$set(this, 'attrTxt', '请选择');
				}
			},
			
			// 打开属性插件
			selecAttr: function() {
				this.$set(this.attr, 'cartAttr', true);
				this.$set(this, 'isOpen', true);
			},
			onMyEvent: function() {
				this.$set(this.attr, 'cartAttr', false);
				this.$set(this, 'isOpen', false);
			},
			openAttr() {
				this.attr.cartAttr = !this.attr.cartAttr;
			},
			// 立即兑换
			exchange() {
				let that = this;
				let	productSelect = that.productValue[this.attrValue];
				
				//如果有属性,没有选择,提示用户选择
				if (that.attr.productAttr.length && productSelect === undefined) {
					return that.$util.Tips({
						// title: '产品库存不足，请选择其它属性'
						title: '请选择产品属性'
					});
				}
				if(that.storeInfo.store_type == 3 && !that.delivery_date) {
					return that.$util.Tips({
						title: '请先选择送达日期'
					});
				}
				
				if(that.storeInfo.store_type == 2 && !that.delivery_interval) {
					return that.$util.Tips({
						title: '请选择间隔日期'
					});
				}
				
				if(that.storeInfo.store_type == 2 && !that.delivery_week) {
					return that.$util.Tips({
						title: '请选择送达时间'
					});
				}
				
				submitExchange({
					productId: this.id,
					new: 1,
					uniqueId: this.attr.productSelect !== undefined ? this.attr.productSelect.unique : '',
					exchange_code: this.exchangeId,
					gift_product_ids: that.gift_product_ids.toString(), // 赠品
					delivery_date: that.delivery_date, // 配送日期
					delivery_interval: that.delivery_interval || '', //配送间隔
					delivery_week: that.delivery_week || '' // 送达时间
				}).then(res => {
					that.attr.cartAttr = false;
					if(res.status == 200) {
						uni.navigateTo({
							url: '/pages/users/exchange_order_confirm/exchange_order_confirm?cartId=' + res.data.cartId
						});
					} else {
						that.$util.Tips({
							title: res.msg
						});
					}
					// 57190402591190941696
				}).catch(err => {
					that.attr.cartAttr = false;
					return that.$util.Tips({
						title: err
					});
				})
				
			}
		}
	};
</script>

<style scoped lang="scss">

	.iconfonts {
		color: #fff !important;
		font-size: 28rpx;
	}

	.labelNav {
		margin-top: 20rpx;
	}
	.labelNav .item {
		font-size: 24rpx;
		margin-right: 30rpx;
	}
	.labelNav .item .iconfont {
		font-size: 25rpx;
		margin-right: 10rpx;
		color: #95c51b;
	}
	.promiton {
		position: relative;
		padding: 20rpx 30rpx 0;
		.more {
			position: absolute;
			top: 30rpx;
			right: 50rpx;
			width: 10rpx;
			height: 10rpx;
			background-color: #95c51b;
			border-radius: 50%;
			&::before, &::after {
				content: '';
				position: absolute;
				top: 25%;
				left: -10rpx;
				transform: translate(-50%, 0);
				width: 6rpx;
				height: 6rpx;
				background-color: #95c51b;
				border-radius: 50%;
			}
			&::after{
				left: unset;
				right: -16rpx;
			}
		}
	}
	.product-con .footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.product-con .footer .item {
		width: 15%;
		font-size: 18rpx;
		color: #666;
		padding-top: 20rpx;
	}

	.product-con .footer .item .iconfont {
		text-align: center;
		font-size: 40rpx;
	}
	.product-con .footer .bnt {
		width: 85%;
	}
	.product-con .footer .bnt .bnts {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.product-con .footer .bnt .buy {
		background-color: #95c51b;
	}
	.product-con .product-intro .title {
		position: relative;
		padding-bottom: 40rpx;
	}
	.product-con .product-intro .title::after {
		content: '';
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translate(-50%, 0);
		width: 80rpx;
		height: 5rpx;
		background-color: #95c51b;
	}
	
	button {
		padding: 0;
		margin: 0;
		line-height: normal;
		background-color: #fff;
	}
	button::after {
		border: 0;
	}
	.product-con .conter {
		display: block;
		padding-bottom: 100rpx;
	}
	.product-con .conter img {
		display: block;
	}
	.ot-price {
		text-decoration: line-through;
	}
	.text-gray {
		color: #999;
	}
</style>
